/* SPDX-License-Identifier: Apache-2.0 */

/*
  A form with radio buttons controlling display of .radio-toggle elements.

  <form class="radio-toggle-form">
    <input type="radio" data-target=".radio-toggle-0">
    <input type="radio" data-target=".radio-toggle-1">
    <div class="radio-toggle radio-toggle-0">
      <!-- Displays when [data-target=".radio-toggle-0"] is selected. -->
    </div>
    <div class="radio-toggle radio-toggle-1">
      <!-- Displays when [data-target=".radio-toggle-1"] is selected. -->
    </div>
  </form>

  The .radio-toggle elements must be siblings of the radio buttons.
*/

.radio-toggle-form {
  .radio-toggle {
    display: none;
  }

  input[type="radio"][data-target=".radio-toggle-1"]:checked ~ .radio-toggle-1,
  input[type="radio"][data-target=".radio-toggle-2"]:checked ~ .radio-toggle-2 {
    display: block;
  }
}
